<template>
    <div class="master_msg">
        <div class="msg">
            <ul class="set_list">
                <router-link tag="li" to="/setting">
                    <i class="icon iconfont icon-shezhi f32"></i>
                    <!-- <img src="@/assets/my/设置.png" alt=""> -->
                </router-link>
                <li>
                    <!-- <i class="icon iconfont icon-qiandao" @click="qiandao()"></i> -->
                    <router-link tag="i" to="/message" class="icon iconfont icon-xiaoxi">
                        <span class="f16" v-if="amount > 0">{{amount > 10 ? '9+' : amount}}</span>
                    </router-link>
                </li>
            </ul>
            <dl class="my_info">
                <router-link tag="dt" to="/personalData">
                        <img :src="masterData.userPhoto | hasdomain" alt="" @error="$event.target.src = require('@/assets/my/headImg.png')">
                    <!-- <span>{{userInfo.userName}}</span> -->
                </router-link>
                <dd>
                    <h3 class="f26">{{masterData.name}}</h3>
                    <div class="integral">
                        <!-- <span class="f20">积分0</span> -->
                        <router-link tag="span" to="/bill" class="f20">余额{{balance}}</router-link>
                    </div>
                </dd>
            </dl>
            <ul class="heibg">
                <li v-for="(item, key) in condition" :key="key" @click="setState(key, item.name)">
                    {{item.val}}
                    <i class="icon iconfont icon-kaiguan_kai f32" v-if="item.bool == 1"></i>
                    <i class="icon iconfont icon-kaiguan_guan f32" v-else></i>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'masterMsg',
        components: {
            
        },
        data() {
            return {
                condition:[
                    {
                        val: '线上咨询',
                        bool: '',
                        icon: 'icon-kaiguan_guan',
                        name: 'openonlineservice'
                    },{
                        val: '线下服务',
                        bool: '',
                        icon: 'icon-kaiguan_guan',
                        name: 'openofflineservice'
                    },{
                        val: '我在忙碌',
                        bool: '',
                        icon: 'icon-kaiguan_kai',
                        name: 'isbusy'
                    },
                ],
                masterData: {

                },
                amount: '0',
                balance: 0
            }
        },
        methods:{
            getmasterdetail() { // 大师详情
                let params = {
                    id: this.$store.state.masterId
                }
                this.$http.fetchGet('getmasterdetail', params).then(res => {
                    if(res.code == 200) {
                        this.masterData = res.data;
                        this.condition[0].bool = res.data.openOnlineService
                        this.condition[1].bool = res.data.openOfflineService
                        this.condition[2].bool = res.data.isBusy
                    } else {
                        console.log(res.msg)
                    }
                }, err => {

                })
            },
            setState(ind, name) { // 修改大师服务状态
                this.condition[ind].bool = !this.condition[ind].bool;
                let params = {
                    masterid: this.$store.state.masterId,
                    paramname: name,
                    value: this.condition[ind].bool
                }
                this.$http.fetchGet('openonlineUpdate', params).then(res => {
                    if(res.code == 200){
                        
                    } else {
                        console.log(res.msg)
                    }
                }, err => {

                })
            },
             qiandao() {
                this.$router.push({
                    path: '/signIn'
                })
            },
            getMessageSummary() { // 获取消息通知
                let params = {
                    userId: this.$store.state.userId
                }
                this.$http.fetchGet('getMessageSummary', params).then(res => {
                    if(res.code == 200) {
                        this.amount = res.data.total
                    } else {
                        console.log(res.msg)
                    }
                }, err => {
                    console.log(err)
                })
            },
            allMoney() { // 获取余额
                let params = {
                    userId: this.$store.state.userId
                }
                this.$http.fetchGet('allMoney', params).then(res => {
                    if(res.code == 200) {
                    this.balance = res.data
                    }
                }, err => {

                })
            }
        },
        mounted() {
            this.getmasterdetail()
            this.allMoney()
            this.getMessageSummary()
        }
    }
</script>

<style lang="less" scoped>
    .master_msg{
        .h(310);
        width: 100%;
        box-sizing: border-box;
        background: #fff url('../../assets/my/bg.png') 0px -62px no-repeat;
        background-size:100%; 
        position: relative;
        padding: 0 20px;
        .pt(20);
        .heibg{
            position: absolute;
            right: 0px;
            bottom: 6px;
            box-sizing: border-box;
            .h(200);
            .w(220);
            .pl(20);
            li{
                .lh(60);
                color: #fff;
               i.icon{
                    color: #fff;
                    text-align: right;
                    // vertical-align: middle;
                    .ml(10);
                    transform:scale(1.5);
                }
                i.icon-kaiguan3{
                    color: blue;
                }
                i.icon-kaiguan4{
                    color: #ccc;
                }
            }
        }
        .set_list{
            display: flex;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            -ms-flex-pack:justify ;
            justify-content: space-between;
            li {
                img {
                    .w(32);
                    .h(34);
                    &:nth-child(1) {
                        .mr(20);
                    }
                }
                i.icon{
                    font-size: 20px;
                    color: #fff;
                    position: relative;
                    span{
                        position: absolute;
                        top: -7px;
                        right: -5px;
                        background: red;
                        border-radius: 50%;
                        display: inline-block;
                        .w(30);
                        .h(30);
                        .lh(30);
                        text-align: center;
                    }
                }
            }
        }
        .my_info{
            display: flex;
            dt{
                flex: 2.5;
                .w(160);
                .h(200);
                margin: 0 10px;
                text-align: center;
                .lh(200);
                .mr(20);
                box-sizing: border-box;
                img{
                    width: 100%;
                    height: auto;
                    border-radius: 50%;
                    overflow: hidden;
                    .w(150);
                    .h(150);
                    .lh(200);
                    .mt(30);
                }
                span{
                    border-radius: 50%;
                    .w(160);
                    .h(160);
                    .lh(160);
                    background:rgba(136, 138, 146, .6);
                    display: inline-block;
                    color: #fff;
                    text-align: center;
                }
            }
            dd{
                flex: 7.5;
                color: #fff;
                .pt(60);
                h3{
                    font-weight:normal;
                }
                .integral{
                    // display: inline-block;
                    // border-radius: 20px;
                    // border: 1px solid #fff;
                    // .pl(10);
                    // .pr(10);
                    // .lh(40);
                    // text-align: center;
                    // color: #fff;
                    .mt(20);
                    span{
                        border: 1px solid #fff;
                        border-radius: 20px;
                        .mr(10);
                        .pl(10);
                        .pr(10);
                        .lh(40);
                        .mt(10);
                        text-align: center;
                        color: #fff;
                    }
                }
            }
        }
    }
</style>
